<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <el-menu :default-active="activeMenuIndex" id="menu" mode="vertical"
                 @open="handleMenuOpen"
                 @select="handleItemSel"
                 unique-opened
        >
          <MultiLevelMenu
            v-for="(firstItem, firstIndex) in menu"
            :key="firstIndex"
            :item="firstItem"
            :index="String(firstIndex)"
            :level="1"
          />
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="138px">
          <el-form-item label="资源名称" prop="keyword">
            <el-input v-model="queryParams.contentName" placeholder="请输入资源名称" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="单位/平台/部门名称" prop="keyword">
            <el-input v-model="queryParams.keyword" placeholder="请输入单位或平台或部门名称" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
<!--          <el-form-item label="审核状态" prop="status">-->
<!--            <el-select v-model="queryParams.status" placeholder="请选择" clearable @keyup.enter.native="handleQuery">-->
<!--              <el-option label="正常" :value="0" />-->
<!--              <el-option label="保存" :value="-1" />-->
<!--              <el-option label="未审核" :value="2" />-->
<!--              <el-option label="未测试" :value="3" />-->
<!--              <el-option label="下架" :value="1" />-->
<!--              <el-option label="审核失败" :value="-2" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

<!--        <el-row :gutter="10" class="mb8">-->
<!--          <el-col :span="1.5">-->
<!--            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['datasourceBase:add']">注册</el-button>-->
<!--          </el-col>-->
<!--          <el-col :span="1.5">-->
<!--            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="singleDisabled" @click="handleUpdate" v-hasPermi="['datasourceBase:edit']">修改</el-button>-->
<!--          </el-col>-->
<!--          <el-col :span="1.5">-->
<!--            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multipleDisabled" @click="handleDelete" v-hasPermi="['datasourceBase:remove']">删除</el-button>-->
<!--          </el-col>-->
<!--          <right-toolbar :showSearch.sync="showSearch" @queryTable="getResourceList"></right-toolbar>-->
<!--        </el-row>-->

        <el-table v-loading="loading" :data="DatasourceBaseList" @selection-change="handleSelectionChange">
<!--          <el-table-column type="selection" width="55" align="center" />-->
          <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
          <el-table-column label="资源名称" align="center" prop="contentName" width="180" />
          <el-table-column label="对应数据通道" align="center" prop="sourceId" width="180" />
          <el-table-column label="关键字" align="center" prop="keyWords" />
          <el-table-column label="分类" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.systemFieldList && scope.row.systemFieldList.length > 0">
                {{ scope.row.systemFieldList.map(file => file.fieldName).join(',') }}
              </span>
              <span v-else>无</span>
            </template>
          </el-table-column>
          <el-table-column label="所属用户" align="center" prop="createBy"/>
          <el-table-column label="可见控制" align="center" prop="controlRuleName" />
          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-document" @click="handleDetail(scope.row)">查看详情</el-button>
<!--              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['datasourceBase:edit']" v-if="scope.row.status=='0' ? false :true">修改</el-button>-->
<!--              <el-button size="mini" type="text" icon="el-icon-setting" @click="handleCheck(scope.row)" v-if="scope.row.status=='3' ? true : false">测试</el-button>-->
<!--              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['datasourceBase:remove']">删除</el-button>-->
<!--              <el-button size="mini" type="text" icon="el-icon-setting" @click="handleUpdate(scope.row)">修改</el-button>-->
<!--              <el-button size="mini" type="text" icon="el-icon-shopping-cart-2" @click="handleUp(scope.row)" v-if="(scope.row.status === 1 || scope.row.status === 0) ? true : false">{{ scope.row.status === 1 ? "上架" : "下架"}}</el-button>-->
            </template>
          </el-table-column>

        </el-table>

        <pagination v-show="resourceTotal>0" :total="resourceTotal" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getResourceList" />
        <!-- 查看详情对话框 -->
        <el-dialog :title="DetailTitle" :visible.sync="DetailOpen" width="1300px" append-to-body>
          <el-form v-if="addMethod===1" label-width="100px"  v-model="resourceDetail">
            <el-form-item label="数据通道Id" prop="radio">
              <el-input v-model="resourceDetail.sourceId" disabled="disabled"></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="数据资源名称">
                  <el-input v-model="resourceDetail.contentName" disabled="disabled"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所在表名">
                  <el-input v-model="resourceDetail.DName" disabled="disabled"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="分类">
                  <el-input v-model="concatenatedFilenames" disabled="disabled"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="关键字">
                  <el-input v-model="resourceDetail.keywordList" disabled="disabled"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
              <el-form-item label="备注">
                <el-input v-model="resourceDetail.remark" disabled="disabled"></el-input>
              </el-form-item>
            <el-form-item label="具体内容"  disabled="disabled">
              <el-input v-model="resourceDetail.contentDetail" placeholder="请输入数据资源具体内容" type="textarea" maxlength="1000" show-word-limit  disabled="disabled"/>
            </el-form-item>
            <el-form-item label="展示图片" prop="iconUrl">
              <img :src="resourceDetail.iconUrl" alt="无" width="50px" height="50px">
            </el-form-item>
<!--              <el-form-item label="可见规则集">-->
<!--                <el-input v-model="resourceDetail.controlRuleName" disabled="disabled"></el-input>-->
<!--                <el-table>-->
<!--                  <el-table-column label="序号" align="center" prop="company" type="index"></el-table-column>-->
<!--                  <el-table-column label="规则名称" align="center" prop="company"></el-table-column>-->
<!--                  <el-table-column label="用户级别" align="center" prop="company" ></el-table-column>-->
<!--                  <el-table-column label="用户类型" align="center" prop="company" ></el-table-column>-->
<!--                  <el-table-column label="指定用户" align="center" prop="company" ></el-table-column>-->
<!--                  <el-table-column label="可见性" align="center" prop="company" ></el-table-column>-->
<!--                </el-table>-->
<!--              </el-form-item>-->
          </el-form>
          <div slot="footer" class="dialog-footer" prop="status">
            <el-button type="primary" @click="DetailOpen = false">关闭</el-button>
          </div>
        </el-dialog>

        <!-- 注册或配置数据资源信息信息对话框 -->
        <el-dialog :title="UpdateTitle" :visible.sync="UpdateOpen" width="1200px" append-to-body>
          <el-form ref="form" :model="resourceAddForm" label-width="120px">
            <el-form-item label="配置资源方式" prop="radio">
              <el-radio-group v-model="addMethod">
                <el-radio v-model="addMethod" :label="1" >全人工</el-radio>
                <el-radio v-model="addMethod" :label="2" >半自动</el-radio>
                <el-radio v-model="addMethod" :label="3" >全自动</el-radio>
              </el-radio-group>
            </el-form-item>
           <el-form v-if="addMethod===1" label-width="100px">
             <el-form-item label="选择数据通道" prop="radio">
               <el-select v-model="resourceAddForm.sourceId" placeholder="请选择">
                 <el-option
                   v-for="item in sourceAllList"
                   :key="item.id"
                   :label="item.resourceName"
                   :value="item.id">
                 </el-option>
               </el-select>
             </el-form-item>
             <el-row>
              <el-col :span="12">
               <el-form-item label="数据资源名称">
                 <el-input v-model="resourceAddForm.contentName"></el-input>
               </el-form-item>
             </el-col>
               <el-col :span="12">
                 <el-form-item label="所在表名">
                   <el-input v-model="resourceAddForm.DName"></el-input>
                 </el-form-item>
               </el-col>
           </el-row>
             <el-row>
               <el-col :span="12">
                 <el-form-item label="分类">
<!--                   <el-input v-model="resourceAddForm.typeIdList"></el-input>-->
                   <el-cascader
                     :options="catalogList"
                     :props="{ multiple: true }"
                     v-model="resourceAddForm.typeIdList"
                     collapse-tags
                     clearable>
                   </el-cascader>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="关键字">
<!--                   <el-input v-model="resourceAddForm.key"></el-input>-->
                   <el-select
                     v-model="resourceAddForm.keywordList"
                     multiple
                     filterable
                     remote
                     reserve-keyword
                     placeholder="请输入关键词"
                     :remote-method="keyRemoteMethod"
                     :loading="keyLoading">
                     <el-option
                       v-for="item in keyOptions"
                       :key="item"
                       :label="item"
                       :value="item">
                     </el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-form-item label="备注">
               <el-input v-model="resourceAddForm.remark"></el-input>
             </el-form-item>

             <el-form-item label="具体内容" required>
                 <el-input v-model="resourceAddForm.contentDetail" placeholder="请输入数据资源具体内容" type="textarea" maxlength="1000" show-word-limit />
<!--               <el-table>-->
<!--                 <el-table-column label="name" align="center"></el-table-column>-->
<!--                 <el-table-column label="alias" align="center"></el-table-column>-->
<!--                 <el-table-column label="type" align="center"></el-table-column>-->
<!--                 <el-table-column :render-header="renderHeader" width="202px" align="center">-->
<!--                   <template slot-scope="scope">-->
<!--                     <el-button @click="delStructList(scope.row)" type="text" size="small">删除</el-button>-->
<!--                     <el-button type="text" size="small" @click="handelSave(scope.row)">保存</el-button>-->
<!--                   </template>-->
<!--                 </el-table-column>-->
<!--               </el-table>-->
             </el-form-item>
             <el-form-item label="展示图片" prop="iconUrl">
               <el-upload
                 class="upload-demo"
                 action=""
                 :multiple=false
                 :before-upload="handleIconUpload"
                 list-type="picture"
                 v-model="resourceAddForm.iconUrl">
                 <el-button size="small" type="primary">点击上传</el-button>
                 <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
               </el-upload>
               <!-- 展示已选的图标文件 -->
               <div v-if="selectedIconFile">
                 <img :src="selectedIconFile.url" alt="已选图标" />
               </div>
             </el-form-item>
             <el-form-item label="可见规则集">
               <!--               <el-input v-model="defaultControlName"></el-input>-->
               <el-select v-model="resourceAddForm.controlRuleId" placeholder="请选择">
                 <el-option
                   v-for="item in rulesList"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
               </el-select>
               <el-table>
                 <el-table-column label="序号" align="center" prop="company" type="index"></el-table-column>
                 <el-table-column label="规则名称" align="center" prop="company"></el-table-column>
                 <el-table-column label="用户级别" align="center" prop="company" ></el-table-column>
                 <el-table-column label="用户类型" align="center" prop="company" ></el-table-column>
                 <el-table-column label="指定用户" align="center" prop="company" ></el-table-column>
                 <el-table-column label="可见性" align="center" prop="company" ></el-table-column>
               </el-table>
             </el-form-item>
           </el-form>

            <el-upload class="upload-demo" v-if="addMethod===2"
                       ref="resourceFile" :auto-upload="true"
                       name="file"  action="" :on-change="changFileList"
                       multiple :file-list="fileList">
              <el-form-item label="资源文件" style="margin-bottom:0px">
                <el-button size="small" type="primary">选择资源文件</el-button>
              </el-form-item>
            </el-upload>


          </el-form>
          <div slot="footer" class="dialog-footer" prop="status">
            <el-button type="primary" @click="addResource">提交</el-button>
            <el-button type="primary" @click="cancelDialog">关 闭</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>

  </div>
</template>

<script>

import {  DataBaseInfoList, FileUpload } from '@/api/qysj/app/DataBaseInfo'

let id = 1000;
import axios from 'axios';
import {
  listDatasourceBase,
  getDatasourceBase,
  delDatasourceBase,
  addDatasourceBase,
  updateDatasourceBase,
  listAllDatasourceBase,
  operateDatasourceBase,
  checkDatasourceBase,
  getKeyword,
  menuDataSourceBase,
  DataSourceDetail,
  getCatalog,
  ResourceAdd,
  ResourceFileUpload,
  ResourceDelete,
  ResourceUpdate, DatasourceInfoById, MenuSystem
} from '@/api/qysj/app/DatasourceBase.js'
import { listFieldType } from '@/api/qysj/app/FieldType'
import { listAllFieldType } from "@/api/qysj/app/FieldType.js";
import { listUser } from "@/api/system/user";
import { listAllEngineInfo } from "@/api/qysj/app/EngineInfo.js";
import { addEngineApply } from "@/api/qysj/app/EngineApply.js";
import{addDatasourceBaseStruct,delDatasourceBaseStruct,DatasourceBaseStructList,DatasourceBaseTaskInfo} from "@/api/qysj/app/datasourceBaseStruct.js";
import MenuNode from '@/views/qysj/data/source/MultiLevelMenu.vue'
import Vue from 'vue'
import { databaseAll } from '@/api/qysj/app/rawData/Database'
import DirectoryList from '@/views/qysj/data/source/MultiLevelMenu.vue'
import MultiLevelMenu from '@/views/qysj/data/source/MultiLevelMenu.vue'
import SubMenu from '@/views/qysj/data/raw/SubMenu.vue'
export default {
  name: "DatasourceBase",
  components: { SubMenu, MultiLevelMenu, DirectoryList  },
  data() {
    const data = [{id: 1,label: "关键字:",},];
    return {
      // 目录
      menu:[],
      // 目录查询参数
      menuQueryParams: {
        keyword: null,
        parentId:0,
        systemCatalogId:null,
        catalogTypes:'0,1,2'
      },
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        createUserId: null,
        type: null,
        unit: null,
        status: 0,
        brief: null,
        keyword: "",
        detail: null,
        resourceName: null,
        sourceId: null,
        systemCatalogId:null,//分类体系id
        systemFieldId:null//分类id
      },
      // 非单个禁用
      singleDisabled: true,
      // 多个禁用
      multipleDisabled:true,
      // 表单禁用
      formDisabled:true,
      // 加载表格
      loading:true,
      // 数据资源列表
      DatasourceBaseList:[],
      // 选中的数据资源id列表
      resourceIdList:[],
      // 数据资源总条数
      resourceTotal:0,
      // 对话框
      DetailTitle:'',
      DetailOpen:false,
      UpdateTitle:'',
      UpdateOpen:false,
      // 资源详情
      resourceDetail:{},
      // 注册方式
      addMethod:1,
      // 修改或注册资源表单
      resourceAddForm:{},
      // 加载关键词
      keyLoading:false,
      //关键词列表
      keyOptions:[],
      // 规则集列表
      rulesList:[],
      // 用户所有数据通道-注册时下拉列表
      sourceAllList:[],
      // 分类列表
      catalogList:[],
      // 关键词列表
      keyList:[],
      // 上传文件列表
      fileList:[],
      // 选中的icon文件
      selectedIconFile:{},
      // 目录
      activeMenuIndex: '1',
    };
  },
  created() {
    this.getMenuTopList()
    this.getResourceList();
  },
  computed: {
    concatenatedFilenames() {
      if (this.resourceDetail.systemFieldList) {
        return this.resourceDetail.systemFieldList
          .map(item => item.fieldName)
          .join(", ");
      } else {
        return "";
      }
    }
  },
  mounted() {
    // this.getMenuTopList()
  },
  methods: {
    // 表单重置
    reset() {
      (this.dataStructId = ""),
        (this.datasourceContentList = [{
          name: null,
          tableName: null,
          dataType: null,
          remark: null,
          sourceId: null,
        },]),
        (this.resourceAddForm = {
          userId: null, brief: null, iconUrl: null,
          datasourceDefaultControlList: [
            {
              userId: null,
              userType: null,
              userLevel: null,
              sharedType: null,
              isVisible: null,
              remark: null,
              sourceId: null,
              dataEnsureRightType: null,
              dataFreedomType: null,
            },
          ],
          datasourceDefaultPriceList: [
            {
              userId: null,
              userType: null,
              userLevel: null,
              billingType: null,
              usePeriod: null,
              productUnit: null,
              price: null,
              remark: null,
            },
          ],
          datasourceInterface: {
            sourceTypes: null,
            sourceCategory: null,
            isAgent: null,
            databaseAlias: null,
            databaseName: null,
            userName: null,
            password: null,
            ipaddress: null,
            port: null,
            contentType: null,
            engineSerial: null,
            header: null,
            method: null,
            system: null,
            version: null,
            url: null,
            authCode: null,
            engineId: null,
          },
          detail: null,
          inputUserId: null,
          keyword: null,
          ownUserId: null,
          status: null,
          unit: null,
          defaultPwd: null,
          pwdSaveType: null,
          pwdType: null,
          datasourceContentList: [{ name: null, tableName: null, dataType: null, remark: null, sourceId: null, },],
          datasourceStructList: [{ classAlias: null, representation: null, remark: null, datasourceContentList: [], },],
          typeIdList: [],
        });
      this.resetForm("form");
    },
    // 目录展开事件
    // 获取顶级目录体系
    getMenuTopList() {
      listAllFieldType(this.menuQueryParams).then(res=>{
        if (res.code===200){
          // this.menu = res.data.map((item,index) => {
          //   const { id, ...rest } = item;
          //   return {
          //     id:0,//表示是目录体系
          //     ...rest
          //   };
          // });
          for (let i=0;i<res.data.length;i++){
            if (res.data[i].childrenList){
              res.data[i].childrenList =res.data[i].childrenList.map(item=>{
                if (item.exitSon!==0){
                  return {
                    ...item,
                    childrenList:[]
                  }
                }else {
                  return {
                    ...item,
                  }
                }
              })
            }
          }
          this.menu = res.data;
          console.log(' this.menu',  this.menu)
        }
      })
    },
    handleMenuOpen(index){
      let currentMenu=this.getCurrentMenu(index);
      this.menuQueryParams.systemCatalogId=currentMenu.systemCatalogId;
      if (currentMenu.id===10000||currentMenu.id===10001){
        this.menuQueryParams.parentId=0;
      }else {
        this.menuQueryParams.parentId=currentMenu.id;
      }
      if (currentMenu.childrenList.length===0){
        listAllFieldType(this.menuQueryParams).then(res=>{
          if (res.code===200){
            const childrenList=res.data.map(item=>{
              if (item.exitSon!==0){
                return {
                  ...item,
                  childrenList:[]
                }
              }else {
                return {
                  ...item,
                }
              }
            })
            this.$set(currentMenu,'childrenList',childrenList)
            // 筛选对应数据资源
            this.queryParams.systemCatalogId=currentMenu.systemCatalogId;
            this.queryParams.systemFieldId=currentMenu.id;
            this.getResourceList()
            // console.log('this.menu', this.menu)
          }else {
            this.$message('获取子目录失败')
          }
        })
      }
    },
    // 子叶目录节点点击事件
    handleItemSel(index){
      let currentMenu=this.getCurrentMenu(index);
      this.queryParams.systemCatalogId=currentMenu.systemCatalogId;
      this.queryParams.systemFieldId=currentMenu.id;
      this.getResourceList()
    },
    // 根据index路径获取当前的目录对象
    getCurrentMenu(index){
      const arr = index.split('-').map(Number);
      let currentMenu=null;
      for (let i=0;i<arr.length;i++){
        if (i===0){
          currentMenu=this.menu[arr[i]]
        }else {
          if (currentMenu&&currentMenu.childrenList&&currentMenu.childrenList.length>0){
            currentMenu=currentMenu.childrenList[arr[i]]
          }
        }
      }
      return currentMenu;
    },
    // 获取数据资源列表
    getResourceList() {
      this.loading = true;
      listAllDatasourceBase(this.queryParams).then(res => {
        if (res.code === 200||res.code===0) {
          this.DatasourceBaseList = res.rows||[];
          this.resourceTotal = res.total;
          this.loading = false;
        }else {
          this.$message(res.msg)
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getResourceList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 级联选择器数据格式转换
    modifyDataProperties(dataArray) {
      dataArray.forEach(item => {
        item.value = item.id;
        item.label = item.fieldName;

        if (item.childrenList && item.childrenList.length > 0) {
          item.children = this.modifyDataProperties(item.childrenList);
          delete item.childrenList;
        }
      });

      return dataArray;
    },
    /** 注册按钮操作 */
    handleAdd() {
      // this.reset();
      this.UpdateOpen = true;
      this.UpdateTitle = "注册数据资源基本信息";
      this.queryParams.pageSize = null;

      // 获取所有数据通道
      this.queryParams.ownUserId = window.sessionStorage.getItem("UserId");
      DataBaseInfoList(this.queryParams).then(res => {
        if (res.code === 200) {
          this.sourceAllList = res.rows;
        }
      })
      // 获取关键词
      getKeyword().then(res => {
        if (res.code === 200) {
          const allKeyList = res.data.map(item => item.keywordList)
          this.keyStates = [].concat(...allKeyList)
          // this.keyStates=res.data;
          console.log('this.KeyStates', this.keyStates)
        }
      })
    },
    // 修改按钮
    handleUpdate(data) {
      const id = data.id || this.resourceIdList;
      DatasourceInfoById(id).then(res=>{
        if (res.code===200){
          this.UpdateTitle = '修改数据资源信息';
          this.UpdateOpen = true;
          this.resourceAddForm = res.data;
        }
      })
    },
    // 删除按钮
    handleDelete(data) {
      ResourceDelete(data.id).then(res => {
        if (res.code === 200) {
          this.$message('删除成功')
        } else {
          this.$message(res.msg)
        }
      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.resourceIdList = selection.map((item) => item.id);
      this.singleDisabled = selection.length !== 1;
      this.multipleDisabled = !selection.length;
    },
    // 查看详情按钮
    handleDetail(data) {
      this.resourceDetail = data;
      this.DetailTitle = '数据资源详情';
      this.DetailOpen = true;
    },

    // 获取远程关键字
    keyRemoteMethod(query) {
      if (query !== '') {
        this.dbLoading = true
        getKeyword({ keyword: query }).then(res => {
          if (res.code === 200) {
            this.keyLoading = false
            this.keyOptions = res.data
            console.log(' this.keyOptions',  this.keyOptions)
          } else {
            this.keyOptions = []
            this.$message(res.msg)
          }
        })
      } else {
        this.dbOptions = []
      }
    },
    // (提交按钮）
    addResource() {
      this.resourceAddForm.typeIdList = this.resourceAddForm.typeIdList.flatMap(item => item);
      // 注册数据资源
      console.log('this.resourceAddForm', this.resourceAddForm)
      if (this.resourceAddForm.id){
        this.resourceAddForm.controlRuleId=null;
        ResourceUpdate(JSON.stringify(this.resourceAddForm)).then(res=>{
          if (res.code===200){
            this.$message('修改成功')
            this.UpdateOpen=false;
            this.resourceAddForm={}
            this.UpdateOpen=false;
          }else {
            this.$message(res.msg)
          }
        })
      }else {
        ResourceAdd(JSON.stringify(this.resourceAddForm)).then(res=>{
          if (res.code===200){
            this.$message('注册成功')
            this.UpdateOpen=false;
            this.resourceAddForm={}
          }else {
            this.$message(res.msg)
          }
        })
      }
    },

    //TODO 上传多个数据资源文件
    // 数据资源文件更改
    changFileList(file,fileList){
      // fileList.push(file)
      // console.log('file,fileList', file,fileList)
      this.fileList=fileList
    },
    // icon上传
    handleIconUpload(file){
      const form=new FormData()
      form.append('file',file);
      FileUpload(form).then(res=>{
        if (res.code===200){
          this.resourceAddForm.iconUrl=res.url;
          this.selectedIconFile.url=res.url;
          this.$message('上传成功')
        }else {
          this.$message(res.msg)
        }
      })
      this.selectedIconFile=file
      return false;
    },
    // 关闭对话框按钮
    cancelDialog(){
      this.UpdateOpen=false;
    }

  }
};
</script>
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-upload-list{
  padding-left: 116px !important;
}
/* //目录 */
.el-menu-item{
  margin-left: 5px !important;
}
#datasourceMenu{
  margin-right: 10px;
  height: 670px;
  overflow-y: scroll;
  /* 自定义滚动条样式 */
  scrollbar-width: thin; /* 宽度，支持部分浏览器 */
  scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
}
/* WebKit 内核浏览器的滚动条样式 */
#datasourceMenu::-webkit-scrollbar {
  width: 10px;
}

#datasourceMenu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

#datasourceMenu::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

#datasourceMenu::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#datasourceMenu::-webkit-scrollbar-corner {
  background: #f1f1f1;
}
</style>
